<template>
  <div class="dailyExecuteCase-statistics">

    <el-dialog title="每日执行用例统计" :visible.sync="dialogVisible" :fullscreen=true @opened="openDialog">
      <template slot="title">
        <div style="font-size: 18px;">
          <span>每日执行用例统计</span>

          <el-tooltip class="item" effect="dark" content="每日执行用例统计" placement="right-end">
            <i class="el-tooltip el-icon-question item"></i>
          </el-tooltip>
        </div>

      </template>

      <el-row>
        <el-col :span="18">
          <div id="dailyExecuteCaseStatisticsOptions" border :style="{height:'400px',width:'100%'}">
          </div>
        </el-col>

        <el-col :span="6">
          <h4 style="font-size: 15px;">选项</h4>
          <div class="line"></div>
          <el-form ref="form" label-width="80px" label-position='top'>
            <el-form-item label="项目">
              <el-select v-model="value" placeholder="请选择">
                <el-option label="Aitesging" value="12">
                </el-option>
              </el-select>
            </el-form-item>

          </el-form>

        </el-col>

      </el-row>

    </el-dialog>

  </div>
</template>

<script>
export default {
  data () {
    return {
      dialogVisible: false,
      value: '',

      //执行结果分布
      dailyExecuteCaseStatisticsOptions: {
        "color": [
          "rgb(93, 207, 255)",
          "rgb(221, 221, 221)",
          "rgb(255, 205, 93)",
          "rgb(115, 216, 151)",
          "rgb(255, 117, 117)",


        ],

        title: {
          text: 'Stacked Area Chart'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['AiTesting-web', 'AiTesting-app', 'AiTesting-pc']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['xi', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'AiTesting-web',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'AiTesting-app',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: 'AiTesting-pc',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [150, 232, 201, 154, 190, 330, 410]
          }
        ]



      },


    }
  },

  methods: {

    openDialog () {
      this.dailyExecuteCaseStatistics()


    },

    dailyExecuteCaseStatistics () {
      let myCharts = this.$echarts.init(document.getElementById("dailyExecuteCaseStatisticsOptions"))
      myCharts.setOption(this.dailyExecuteCaseStatisticsOptions)
    }
  }


}
</script>

<style scoped>
.dailyExecuteCase-statistics .line {
  border-bottom: 1px solid #eee;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
  margin-top: 5px;
  margin-bottom: 10px;
}

.dailyExecuteCase-statistics >>> .el-select {
  display: contents;
}

.dailyExecuteCase-statistics .el-date-editor {
  width: 100%;
}
</style>